<template>
  <div>
    <input type="file" style='display: none' ref='fileUpload' multiple @change='handleFileChange'></input>
    <el-row style="margin-bottom:10px ">
      <el-button size='mini' @click='handleUpload' type="primary" v-if="!disabled">上传</el-button>
      <el-button size='mini' @click='handleDownloadMultiple' type="primary">批量下载</el-button>
      <el-button size='mini' @click='handleDel' type="danger" v-if="!disabled">删除</el-button>
    </el-row>
    <el-table row-key="id" size='mini' @row-click="handleRowClick" @selection-change='handleSelectionChange' :height=height border :data="value" v-bind="$attrs" ref="table">
      <el-table-column type='selection'></el-table-column>
      <el-table-column prop='fileName' label='文件名称'>
      </el-table-column>
      <el-table-column prop='fileSize' label='文件大小' :formatter="fileSizeFormatter">
      </el-table-column>
      <el-table-column prop='fileType' label='文件类型'>
      </el-table-column>
      <el-table-column prop='createTime' label='上传时间'>
      </el-table-column>
      <el-table-column prop='createByName' label='上传人'>
      </el-table-column>
      <el-table-column label='操作'>
        <template slot-scope='{row}'>
          <el-button size='mini' type='text' @click='handleDownload(row)'>下载</el-button>
          <el-button size='mini' type='text' @click='handlePreview(row)'>预览</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title='preview.title' :visible.sync='preview.visible' append-to-body :width='preview.width'>
      <img width="100%" :src="preview.path" v-if="preview.fileType === options.fileType.IMAGE"
           style="object-fit: scale-down" alt=""/>
      <video width="100%" :src="preview.path" controls v-else-if="preview.fileType === options.fileType.VIDEO" alt=""/>
      <audio width="100%" controls v-else-if="preview.fileType === options.fileType.AUDIO" :src="preview.path"></audio>
    </el-dialog>
  </div>
</template>

<script src="./index.js">
</script>

<style scoped>

</style>
